<template>
    <!--操作栏-->
    <div class="operateBox" id="operateBox">
        <div class="box" :style="'height:'+height+'px'">
            <div class="title">操作</div>
            <div class="box_item">
                <op_index v-if="chooseComponent==null"></op_index>
                <!--通用echart操作列-->
                <el-tabs v-else v-model="active" tab-position="top" :stretch="true">
                    <el-tab-pane name="1">
            <span slot="label">
               <el-tooltip class="item" effect="dark" content="配置" placement="top">
                 <i class="el-icon-s-tools" :class="active=='1'?'is-active':''"></i>
               </el-tooltip>
            </span>
                        <op_text v-if="chooseComponent.componentName=='screen_text'"></op_text>
                        <op_chart_general
                                v-if="chooseComponent.componentName=='screen_chart_general'"></op_chart_general>
                        <op_chart_general v-if="chooseComponent.componentName=='screen_chart_bar'"></op_chart_general>
                        <op_chart_general v-if="chooseComponent.componentName=='screen_chart_line'"></op_chart_general>
                        <op_chart_general v-if="chooseComponent.componentName=='screen_chart_pie'"></op_chart_general>
                        <op_chart_map v-if="chooseComponent.componentName=='screen_chart_map'"></op_chart_map>
                        <op_text_date v-if="chooseComponent.componentName=='screen_text_date'"></op_text_date>
                        <op_table_index v-if="chooseComponent.componentName=='screen_table_index'"></op_table_index>
                        <op_table_rank v-if="chooseComponent.componentName=='screen_table_rank'"></op_table_rank>
                        <op_border_index v-if="chooseComponent.componentName=='screen_border_index'"></op_border_index>
                        <op_decoration_index
                                v-if="chooseComponent.componentName=='screen_decoration_index'"></op_decoration_index>
                        <op_img_index v-if="chooseComponent.componentName=='screen_img_index'"></op_img_index>
                    </el-tab-pane>
                    <el-tab-pane name="2">
              <span slot="label">
                <el-tooltip class="item" effect="dark" content="配置" placement="top">
                   <i class="el-icon-document-copy" :class="active=='2'?'is-active':''"></i>
                </el-tooltip>
              </span>
                        <dataConfig></dataConfig>
                    </el-tab-pane>
                    <el-tab-pane name="3">
            <span slot="label">
              <el-tooltip class="item" effect="dark" content="参数" placement="top">
                 <i class="el-icon-folder" :class="active=='3'?'is-active':''"></i>
              </el-tooltip>
            </span>
                        <!--文本操作-->
                        <el-form ref="form" label-width="100px" style="width: 98%">
                            <el-form-item label="图层编号：">
                                <el-input size="mini" v-model="chooseComponent.uuid" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="x位置：">
                                <el-input-number size="mini" v-model="chooseComponent.location.left"
                                                 controls-position="right"
                                                 :min="0" :precision="2"></el-input-number>
                            </el-form-item>
                            <el-form-item label="y位置：">
                                <el-input-number size="mini" v-model="chooseComponent.location.top"
                                                 controls-position="right"
                                                 :min="0" :precision="2"></el-input-number>
                            </el-form-item>
                            <el-form-item label="宽度：">
                                <el-input-number size="mini" v-model="chooseComponent.location.width"
                                                 controls-position="right"
                                                 :min="0" :precision="2"></el-input-number>
                            </el-form-item>
                            <el-form-item label="高度：">
                                <el-input-number size="mini" v-model="chooseComponent.location.height"
                                                 controls-position="right"
                                                 :min="0" :precision="2"></el-input-number>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>


            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "operate",
        components: {
            //操作首页
            'op_index': () => import('./operateModule/index'),
            //数据配置
            'dataConfig': () => import('./operateModule/dataConfig'),
            //文字操作
            'op_text': () => import('./operateModule/text/op_text'),
            'op_text_date': () => import('./operateModule/text/op_text_date'),
            //图表操作
            'op_chart_general': () => import('./operateModule/chart/op_general'),
            'op_chart_bar': () => import('./operateModule/chart/op_bar'),
            'op_chart_map': () => import('./operateModule/chart/op_map'),
            //轮播表操作
            'op_table_index': () => import('./operateModule/table/index'),
            //排名轮播表操作
            'op_table_rank': () => import('./operateModule/table/rank'),
            //datav边框操作
            'op_border_index': () => import('./operateModule/border/index'),
            //datav装饰操作
            'op_decoration_index': () => import('./operateModule/decoration/index'),
            //图片操作
            'op_img_index': () => import('./operateModule/img/index'),

        },
        computed: {
            //当前选中的值
            chooseComponent() {
                return this.$store.state.chooseComponent
            },
        },
        data() {
            return {
                height: 0,
                active: "1",
                test: {
                    geo: [
                        {
                            map: 'JS',
                            zlevel: 5,
                            label: {
                                show: true,
                                color: '#eee'
                            },
                            itemStyle: {
                                color: '#2075B8',
                                borderWidth: '1',
                                borderColor: '#fff',
                            }
                        },
                        {
                            map: 'JS',
                            top: '11%',
                            zlevel: 4,
                            itemStyle: {
                                color: '#3C5FA1',
                                borderWidth: '1',
                                borderColor: '#3C5FA1',
                            }
                        },
                        {
                            map: 'JS',
                            top: '12%',
                            zlevel: 3,
                            itemStyle: {
                                color: '#163F6C',
                                borderWidth: '1',
                                borderColor: '#163F6C',
                            }
                        },
                        {
                            map: 'JS',
                            top: '13%',
                            zlevel: 2,
                            itemStyle: {
                                color: '#31A0E6',
                                borderWidth: '1',
                                borderColor: '#31A0E6',
                                shadowColor: '#fff',
                                shadowBlur: '10'
                            }
                        }
                    ]
                }
            }
        },
        mounted() {
            this.height = document.getElementById("operateBox").offsetHeight
        }
    }
</script>

<style scoped lang="scss">
    .operateBox {
        width: 300px;
        height: 100%;
        background: #545c64;
        display: flex;
        flex-direction: column;

        .box {
            height: 100%;
            width: 100%;
            color: #bcc8d4;
            background: #545c64;
            display: flex;
            flex-direction: column;

            .title {
                width: 100%;
                text-align: center;
                padding: 10px 0;
                font-size: 18px;
                background: #0C0C0C;
                color: white;
            }

            .box_item {
                overflow: hidden;
                overflow-y: auto;
                width: 100%;
                flex: 1;
            }
        }
    }

    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgba(144, 146, 152, .3);
    }

    ::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }

    ::v-deep .el-tabs__item {
        color: white;
    }

    .is-active {
        color: #409eff !important;
    }

    ::v-deep .el-form-item__label {
        color: white;
    }

    ::v-deep .el-collapse-item__header {
        background-color: #545c64;
        color: white;
    }

    ::v-deep .el-collapse-item__content {
        background-color: #545c64;
        color: white;
    }

    ::v-deep .el-radio__label {
        color: white;
    }
</style>
